<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <customDeptTree @clickDeptNode="clickDeptNode" :show-search-input="true"/>
      </el-col>
      <el-col :span="20" :xs="24">
        <br>
        <br>
        <center>
          <el-button-group>
            <el-button @click=getDataByDay()>最近一日</el-button>
            <el-button @click=getDataByWeek()>最近一周</el-button>
            <el-button @click=getDataByMonth()>最近一月</el-button>
          </el-button-group>
          <el-date-picker type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          :picker-options="pickerOptions" v-model="selectDateRange"
          >
          </el-date-picker>
          <el-button
            type="warning"
            icon="el-icon-download"
            @click="handleExport"
            v-hasPermi="['statistic:gatewayMessageCount:export']"
          >导出
          </el-button>

          <div>
            <bar-chart :chart-data="gatewayMessageChartData" :height="height"/>
          </div>
        </center>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import BarChart from '@/views/dashboard/BarChart'
import { exportGatewayMessageCountChart, getGatewayMessageCountChart } from '@/api/system/statistic'

export default {
  components: {
    BarChart
  },
  data() {
    return {
      // 报表的高度
      height: '500px',
      // 选择的日期数组, 第一个元素为起始时间, 第二个为结束时间
      selectDateRange: [],
      // 报表数据
      gatewayMessageChartData: {
        xAxisData: [], count: [], position: 'top', color: '#2c5d3c'
      },

      // 日期选择的快捷选项
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一日',
            onClick(picker) {
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, start])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 8)
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
              end.setTime(end.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },

      // 所选择的组织
      selectDeptId: undefined
    }
  },
  watch: {
    selectDateRange(value) {
      if (value && value.length > 1) {
        this.getGatewayMessageData()
      }
    }
  },
  created() {
    this.getDataByWeek()
  },
  methods: {
    // 查询账号消息数据统计
    getGatewayMessageData() {
      getGatewayMessageCountChart({
        startTime: this.selectDateRange[0].getTime(),
        endTime: this.selectDateRange[1].getTime(),
        deptId: this.selectDeptId
      }).then(response => {
        if (response.code === 200) {
          let chartData = response.data
          let xAxisData = []
          let count = []

          for (let i = 0, len = chartData.length; i < len; i++) {
            xAxisData.push(chartData[i].axisData)
            count.push(chartData[i].count)
          }

          this.gatewayMessageChartData.xAxisData = xAxisData
          this.gatewayMessageChartData.count = count
        }
      })
    },

    // 获取前一天的数据
    getDataByDay() {
      this.getTimeByDay()
    },

    // 获取前一周的数据
    getDataByWeek() {
      this.getTimeByWeek()
    },

    // 获取前一月的数据
    getDataByMonth() {
      this.getTimeByMonth()
    },

    // 获取前一天的时间
    getTimeByDay() {
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24)
      this.selectDateRange = [start, start]
    },

    // 获取前一周的时间
    getTimeByWeek() {
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      const end = new Date()
      end.setTime(end.getTime() - 3600 * 1000 * 24)
      this.selectDateRange = [start, end]
    },

    // 获取前一月的时间
    getTimeByMonth() {
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 31)
      const end = new Date()
      end.setTime(end.getTime() - 3600 * 1000 * 24)
      this.selectDateRange = [start, end]
    },

    /**
     * 点击树节点
     * @param value
     */
    clickDeptNode(value) {
      console.log(value)
      this.selectDeptId = value.id
      this.getGatewayMessageData()
    },

    /** 导出按钮操作 */
    handleExport() {
      this.$confirm('是否确认导出?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return exportGatewayMessageCountChart({
          startTime: this.selectDateRange[0].getTime(),
          endTime: this.selectDateRange[1].getTime(),
          deptId: this.selectDeptId
        })
      }).then(response => {
        this.download(response.msg)
      }).catch(function() {
      })
    }
  }
}
</script>
